//Ext.onReady(function(){
//    new Ext.Panel({
//        renderTo: "hello",
//        title: "hello",
//        width: 300,
//        height: 200,
//        html: '<h1>Hello,easyjf open source!</h1>',
//        tbar: [new Ext.Toolbar.TextItem('工具栏:'), {
//            xtype: "tbfill"
//        }, {
//            pressed: true,
//            text: '添加'
//        }, {
//            xtype: "tbseparator"
//        }, {
//            pressed: true,
//            text: '保存'
//        }]
//    });
//});// onReady

//Viewport
//Ext.onReady(function(){
//    new Ext.Viewport({
//        enableTabScroll: true,
//        layout: "border",
//        items: [{
//            title: "面板",
//            region: "north",
//            height: 50,
//            html: "<h1>网站后台管理系统!</h1>"
//        }, {
//            title: "菜单",
//            region: "west",
//            width: 200,
//            collapsible: true,
//            html: "菜单栏"
//        }, {
//            xtype: "tabpanel",
//            region: "center",
//            items: [{
//                title: "面板1"
//            }, {
//                title: "面板2"
//            }]
//        }]
//    });
//});

// 基本窗口
// var i = 0;
// function newWin(){
//     var win = new Ext.Window({
//         title: "窗口" + i++,
//         width: 400,
//         height: 300,
//         maximizable: true
//     });
//     win.show();
// }
// 
// Ext.onReady(function(){
//     Ext.get("btn").on("click", newWin);
// });

// 窗口分组
//var i = 0, mygroup;
//function newWin(){
//    var win = new Ext.Window({
//        title: "窗口" + i++,
//        width: 400,
//        
//        height: 300,
//        maximizable: true,
//        manager: mygroup
//    });
//    win.show();
//}
//
//function toBack(){
//    mygroup.sendToBack(mygroup.getActive());
//}
//
//function hideAll(){
//    mygroup.hideAll();
//}
//
//Ext.onReady(function(){
//    mygroup = new Ext.WindowGroup();
//    Ext.get("btn").on("click", newWin);
//    Ext.get("btnToBack").on("click", toBack);
//    Ext.get("btnHide").on("click", hideAll);
//});

// 对话框
//Ext.onReady(function(){
//    Ext.get("btnAlert").on("click", function(){
//        Ext.MessageBox.confirm("请确认", "是否真的要删除指定的内容", function(button, text){
//            if (button == "yes") {
//                // 执行删除操作
//                alert("成功删除");
//            }
//        });
//        
//    });
//    
//    Ext.get("btn").on("click", function(){
//        Ext.MessageBox.prompt("输入提示框", "请输入你的新年愿望:", function(button, text){
//            if (button == "ok") {
//                alert("你的新年愿望是:" + text);
//            }
//            else 
//                alert("你放弃了录入!");
//        });
//    });
//    
//});//onReady

// 自定义对话框
//function save(button){
//    if (button == "yes") {// 执行数据保存操作
//        Ext.MessageBox.alert("保存数据!");
//    }
//    else 
//        if (button == "no") {
//        // 不保存数据
//        }
//        else {
//        // 取消当前操作
//        }
//}
//
//Ext.onReady(function(){
//    Ext.get("btn").on("click", function(){
//        Ext.Msg.show({
//            title: '保存数据',
//            msg: '你已经作了一些数据操作，是否要保存当前内容的修改？',
//            buttons: Ext.Msg.YESNOCANCEL,
//            fn: save,
//            icon: Ext.MessageBox.QUESTION
//        });
//    });
//});

//// Border布局
//Ext.onReady(function(){
//    new Ext.Viewport({
//        layout: "border",
//        items: [{
//            region: "north",
//            height: 50,
//            title: "顶部面板"
//        }, {
//            region: "south",
//            height: 50,
//            title: "底部面板"
//        }, {
//            region: "center",
//            title: "中央面板"
//        }, {
//            region: "west",
//            width: 100,
//            title: "左边面板"
//        }, {
//            region: "east",
//            width: 100,
//            title: "右边面板"
//        }]
//    
//    });
//    
//});

// Column布局
//Ext.onReady(function(){
//    new Ext.Panel({
//        renderTo: "hello",
//        title: "容器组件",
//        layout: "column",      
//        width: 500,
//        height: 100,        
//        items: [{
//            title: "列1",
//            width: 200
//        }, {
//            title: "列2",
//            columnWidth: .3
//        }, {
//            title: "列3",
//            columnWidth: .3
//        }, {
//            title: "列4",
//            columnWidth: .4
//        }]    
//    });
//});

// Fit布局
//Ext.onReady(function(){
//    new Ext.Panel({
//        renderTo: "hello",
//        title: "容器组件",
//        layout: "fit",
//        width: 500,
//        height: 100,
//        items: [{
//            title: "子元素1",
//            html: "这是子元素1中的内容"
//        }, {
//            title: "子元素2",
//            html: "这是子元素2中的内容"
//        }]
//    });
//});

// Accordion布局
//Ext.onReady(function(){
//    new Ext.Panel({
//        renderTo: "hello",
//        title: "容器组件",
//        width: 500,
//        height: 200,
//        layout: "accordion",
//        layoutConfig: {
//            animate: true
//        },
//        items: [{
//            title: "子元素1",
//            html: "这是子元素1中的内容"
//        }, {
//            title: "子元素2",
//            html: "这是子元素2中的内容"
//        }, {
//            title: "子元素3",
//            html: "这是子元素3中的内容"
//        }]
//    });
//});

// //Card布局
//Ext.onReady(function(){
//    var panel = new Ext.Panel({
//        renderTo: "hello",
//        title: "容器组件",
//        width: 500,
//        height: 200,
//        layout: "card",
//        activeItem: 0,
//        layoutConfig: {
//            animate: true
//        },
//        items: [{
//            title: "子元素1",
//            html: "这是子元素1中的内容"
//        }, {
//            title: "子元素2",
//            html: "这是子元素2中的内容"
//        }, {
//            title: "子元素3",
//            html: "这是子元素3中的内容"
//        }],
//        buttons: [{
//            text: "切换",
//            handler: changeTab
//        }]
//    });
//    var i = 1;
//    function changeTab(){
//        panel.getLayout().setActiveItem(i++);
//        if (i > 2) 
//            i = 0;
//    }
//});

// Table布局
//Ext.onReady(function(){
//    var panel = new Ext.Panel({
//        renderTo: "hello",
//        title: "容器组件",
//        width: 500,
//        height: 200,
//        layout: "table",
//        layoutConfig: {
//            columns: 3
//        },
//        items: [{
//            title: "子元素1",
//            html: "这是子元素1中的内容",
//            rowspan: 2,
//            height: 100
//        }, {
//            title: "子元素2",
//            html: "这是子元素2中的内容",
//            colspan: 2
//        }, {
//            title: "子元素3",
//            html: "这是子元素3中的内容"
//        }, {
//            title: "子元素4",
//            html: "这是子元素4中的内容"
//        }]
//    });
//});

// // GridPanel
//function showUrl(value){
//    return "<a href=\"http://" + value + "\">" + value + "</a>";
//}
//
//Ext.onReady(function(){
//    var data = [[1, 'EasyJWeb', 'EasyJF', 'www.easyjf.com'], [2, 'jfox', 'huihoo', 'www.huihoo.org'], [3, 'jdon', 'jdon', 'www.jdon.com'], [4, 'springside', 'springside', 'www.springside.org.cn']];
//    var store = new Ext.data.SimpleStore({
//        data: data,
//        fields: ["id", "name", "organization", "homepage"]
//    });
//    var colM = new Ext.grid.ColumnModel([{
//        header: "项目名称",
//        dataIndex: "name",
//        sortable: true
//    }, {
//        header: "开发团队",
//        dataIndex: "organization",
//        sortable: true
//    }, {
//        header: "网址",
//        dataIndex: "homepage",
//        renderer: showUrl
//    }]);
//    var grid = new Ext.grid.GridPanel({
//        renderTo: "hello",
//        title: "中国Java开源产品及团队",
//        height: 200,
//        width: 600,
//        cm: colM,
//        store: store,
//        autoExpandColumn: 2
//    });
//});

// EditorGridPanel
Ext.onReady(function(){
    var data = [{
        id: 1,
        name: '小王',
        email: 'xiaowang@easyjf.com',
        sex: '男',
        bornDate: '1991-4-4'
    }, {
        id: 2,
        name: '小李',
        email: 'xiaoli@easyjf.com',
        sex: '男',
        bornDate: '1992-5-6'
    }, {
        id: 3,
        name: '小兰',
        email: 'xiaoxiao@easyjf.com',
        sex: '女',
        bornDate: '1993-3-7'
    }];
    
    var store = new Ext.data.JsonStore({
        data: data,
        fields: ["id", "name", "sex", "email", {
            name: "bornDate",
            type: "date",
            dateFormat: "Y-n-j"
        }]
    });
    
    var ds = new Ext.data.Store({
        proxy: new Ext.data.MemoryProxy(data),
        reader: new Ext.data.ArrayReader({}, [{
            name: 'id'
        }, {
            name: 'name'
        }, {
            name: 'sex'
        }, {
            name: 'email'
        }, {
            name: "bornDate",
            type: "date",
            dateFormat: "Y-n-j"
        }])
    });
    
    var selM = new Ext.grid.CheckboxSelectionModel();
    var colM = new Ext.grid.ColumnModel([new Ext.grid.RowNumberer(), {
        header: "编号",
        dataIndex: "id",
        sortable: true
    }, selM, {
        header: "姓名",
        dataIndex: "name",
        sortable: true,
        editor: new Ext.form.TextField()
    }, {
        header: "性别",
        dataIndex: "sex",
        editor: new Ext.form.ComboBox({
            transform: "sexList",
            triggerAction: 'all',
            lazyRender: true
        })
    }, {
        header: "出生日期",
        dataIndex: "bornDate",
        width: 120,
        renderer: Ext.util.Format.dateRenderer('Y年m月d日'),
        editor: new Ext.form.DateField({
            format: 'Y年m月d日'
        })
    }, {
        header: "电子邮件",
        dataIndex: "email",
        sortable: true,
        editor: new Ext.form.TextField()
    }]);
    
    var grid = new Ext.grid.EditorGridPanel({
        renderTo: "hello",
        title: "学生基本信息管理",
        height: 200,
        width: 600,
        sm: selM,
        cm: colM,
        bbar: new Ext.PagingToolbar({
            pageSize: 10,
            store: ds,
            displayInfo: true,
            displayMsg: '显示第 {0} 条到 {1} 条记录，一共 {2} 条',
            emptyMsg: "没有记录"
        }),
        
        store: store,
        autoExpandColumn: 3,
        clicksToEdit: 1
    });
    
    var gridFoot = grid.getView().getFooterPanel(true);
    var paging = new Ext.PagingToolbar(gridFoot, ds, {
        pageSize: 10,
        displayInfo: true,
        displayMsg: '显示第 {0} 条到 {1} 条记录，一共 {2} 条',
        emptyMsg: '没有记录'
    });
});

	